<!DOCTYPE html>
<html xmlns:tui>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="content-type" content="text/html;charset=utf-8">
		<meta name="apple-mobile-web-app-capable" content="yes" >
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" >
		<link rel="apple-touch-icon" href="icon114.png" sizes="114x114">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
		<title>TUI2 手册</title>

		<link rel="stylesheet" href="../depends/font-awesome-4.7.0/css/font-awesome.css">
		<link rel="stylesheet" href="../dist/tui2.css" />
		<link rel="stylesheet" href="../dist/plugins/navigator/navigator.css" />
		<link rel="stylesheet" href="../dist/plugins/location/location.css" />
		<link rel="stylesheet" href="index.css" />
		<!--[if IE 8]>
		<script type="text/javascript" src="../depends/es5-shim.min.js"></script>
		<script type="text/javascript" src="../depends/json2.min.js"></script>
		<![endif]-->
		<script type="text/javascript" src="../depends/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="../dist/tui2.min.js"></script>
		<script type="text/javascript" src="../dist/lang/zh-cn.js"></script>
		<script type="text/javascript" src="../dist/plugins/navigator/navigator.min.js"></script>
		<script type="text/javascript" src="../dist/plugins/location/location.min.js"></script>
		<script type="text/javascript" src="lib/marked.min.js"></script>
		<link rel="stylesheet" href="lib/highlightjs/default.min.css">
		<script src="lib/highlightjs/highlight.min.js"></script>
		<script>
			tui.lang = "zh-CN";
			$(function(){
				var scrollByCode = false;
				var manuallyHide = false;
				var animateDelay = 100;

				function isMobile() {
					return $(window).width() <= 780;
				}

				function scrollToSection(hash, animate) {
					tui.browser.scrollToElement($(hash)[0], 50, function(){
						scrollByCode = false;
						var scrollElement = tui.browser.getWindowScrollElement();
					}, animate);
				}

				function hideMenu(cb) {
					$("#navi").animate({left: "-250px"}, animateDelay);
					// $("#navi").css({left: "-250px"});
					if (isMobile()) {
						manuallyHide = false;
						$(document.body).animate({left: 0, paddingLeft: "10px"}, animateDelay, function(){
							$("#mask").removeClass("show");
							cb && cb();
						});
						$("#banner").animate({left: "0px"}, animateDelay);
						// $(document.body).css({left: 0, paddingLeft: "10px"});
						// $("#banner").css({left: "0px"});
						// $("#mask").removeClass("show");
						// cb && cb();
					} else {
						manuallyHide = true;
						$(document.body).animate({left: 0, paddingLeft: "40px"}, animateDelay, function(){
							$("#mask").removeClass("show");
							cb && cb();
						});
						$("#banner").animate({left: 0}, animateDelay);
						// $(document.body).css({left: 0, paddingLeft: "10px"});
						// $("#mask").removeClass("show");
						// $("#banner").css({left: 0});
						// cb && cb();
					}
				}
				function showMenu() {
					$("#navi").animate({left: "0px"}, animateDelay);
					// $("#navi").css({left: "0px"});
					if (isMobile()) {
						$(document.body).animate({left: "250px", paddingLeft: "10px"}, animateDelay, function(){
							$("#mask").addClass("show");
						});
						$("#banner").animate({left: "250px"}, animateDelay);
						// $(document.body).css({left: "250px", paddingLeft: "10px"});
						// $("#banner").css({left: "250px"});
						// $("#mask").addClass("show");
					} else {
						$(document.body).animate({left: "0px", paddingLeft: "290px"}, animateDelay, function(){
							$("#mask").addClass("show");
						});
						$("#banner").animate({left: "250px"}, animateDelay);
						// $(document.body).css({left: 0, paddingLeft: "260px"});
						// $("#banner").css({left: "250px"});
						// $("#mask").addClass("show");
					}
				}
				$("#banner>span").mousedown(function(e){
					$("#navi").stop();
					if ($("#navi").offset().left >= 0) {
						hideMenu();
					} else {
						showMenu();
					}
				});
				$("#mask").mousedown(function(e){
					hideMenu();
				});
				$$("navi").on("select", function(e){
					if (e.data.path) {
						if (isMobile()) {
							hideMenu(function(){
								scrollByCode = true;
								scrollToSection("#"+e.data.path);
							});
						} else {
							scrollByCode = true;
							scrollToSection("#"+e.data.path);
						}
					}
				});
				$(window).resize(function(){
					if (isMobile()) {
						hideMenu();
					} else {
						if (!manuallyHide)
							showMenu();
					}
				});
				$(window).scroll(function(e){
					if (scrollByCode)
						return;
					var findItem = null;
					var minDistance = null;
					$("h1>span[id],h2>span[id],h3>span[id],h4>span[id]").each(function(index, item){
						var distance = Math.abs(tui.browser.getRectOfPage(item).top - $(window).scrollTop());
						if (findItem == null) {
							findItem = item;
							minDistance = distance;
						} else if (distance < minDistance) {
							findItem = item;
							minDistance = distance;
						}
					});
					var currentItem = $$("navi").get("activeItem");
					if (!currentItem || currentItem.path != findItem.id) {
						$$("navi").activeBy("path", findItem.id);
					}
				});
				function repeat(str, count) {
					var result = "";
					for (var i = 0; i < count; i++)
						result += str;
					return result;
				}
				function renderDoc(result){
					var buffer = "";
					var line;
					var reg = /.*(\r\n|\r|\n)/gm;
					function getLine() {
						if (!result)
							return null;
						var l = reg.exec(result);
						return l ? l[0] : null;
					}
					function getLevel(str) {
						var level = 0;
						for (var i = 0; i < str.length; i++) {
							var c = str[i];
							if (c === "#")
								level++;
							else
								break;
						}
						return level;
					}
					var index = [];
					var path = [];
					var lastLevel = null;
					var lineRegex = /#{1,}\s+(?:\[\]\(([^\)]*)\)\s*)?([^`]*)(?:`\((.*)\)`)?/;
					while ((line = getLine()) != null) {
						var matcher;
						if (matcher = line.match(lineRegex)) {
							var item = {};
							item.text = matcher[2];
							if (matcher[1])
								item.icon = matcher[1];
							if (matcher[3])
								item.path = matcher[3];
							var level = getLevel(line);
							if (lastLevel === null) {
								lastLevel = level;
								path.push(item);
								index.push(item);
							} else {
								if (level == lastLevel) {
									path.pop();
									if (path.length > 0)
										path[path.length - 1].children.push(item);
									else
										index.push(item);
									path.push(item);
								} else if (level > lastLevel) {
									if (!path[path.length - 1].children) {
										path[path.length - 1].children = [];
									}
									path[path.length - 1].children.push(item);
									path.push(item);
								} else {
									for (var i = 0; i <= lastLevel - level; i++)
										path.pop();
									if (path.length > 0)
										path[path.length - 1].children.push(item);
									else
										index.push(item);
									path.push(item);
								}
								lastLevel = level;
							}
							if (item.path)
								line = repeat("#", level) + " <span id='" + item.path + "'>" + item.text.trim() + "</span>" + "\n";
							else
								line = repeat("#", level) + " " + item.text.trim() + "\n";
						}
						buffer += line;
					}
					$$("navi").set("items", index);
					$("#content").html(marked(buffer));
					tui.widget.init($("#content")[0]);
					if (tui.ieVer <= 0 || tui.ieVer > 8)
						hljs.initHighlighting();
					if (location.hash && location.hash.length > 0) {
						scrollToSection(location.hash, false);
					}
				}
				var ver = "";
				tui.ajax.getScript("doc.md").done(function(result) {
					renderDoc(result);
					$("#docVersion").text(ver);
				});
				tui.ajax.getScript("../package.json").done(function(jsonText) {
					var package = JSON.parse(jsonText);
					ver = package.version;
					$("#version").text(ver);
					$("#docVersion").text(ver);
				});
			});
		</script>
	</head>
	<body>
		<div id="banner" unselectable="on">
			<span class="fa fa-bars"></span>
			TUI.JS v2
			<span id="version" style="float:right;margin-right:10px;"></span>
		</div>
		<div id="mask" unselectable="on"></div>
		<tui:navigator id="navi" selectable={true}></tui:navigator>
		<!-- content -->
		<div id="content"></div>
		<br>
	</body>
</html>
